<template>
  <div class="tabDetBox">
    <div class="tabDetBox-left">
      <div>
        <div class="tabDetBox-head">
          <p>
            <span style="font-size: 30px; color: red; margin-right: 10px">
              {{ form.label }} </span
            >categoryArticle
          </p>
          <p>
            totalSearch<span
              style="
                font-size: 18px;
                color: red;
                margin-right: 5px;
                margin-left: 5px;
              "
              >{{ num }}</span
            >piece
          </p>
        </div>
        <div class="tabDetBox-tabBox">
          <ul class="tabDetBox-tabBo-ul">
            <li @click="tabAll">all</li>
            <li
              v-for="(item, index) in list"
              :key="index"
              @click="tabitem(item.value, index)"
            >
              {{ item.label }}
            </li>
          </ul>
          <div class="Acticle_tab_list">
            <div
              v-for="(item, index) in arr"
              :key="index"
              class="ActicleListBox"
              @click="golistDet(item.id)"
            >
              <p class="ActicleListBox_bigTitle">
                <span class="ActicleListBox_hover">{{ item.title }}</span>
                <span class="ActicleListBox_line">|</span>
                <span class="ActicleListBox_title">
                  {{ item.category.label }}
                </span>
              </p>

              <p class="ActicleListBox_p">
                <img class="ActicleListBox_img" :src="item.cover" alt="" />
                <span><van-icon name="like-o" />{{ item.likes }}</span>
                <span><van-icon name="eye-o" />{{ item.views }}</span>
                <span>·</span><span><i class="el-icon-share"></i>share</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabDetBox-right">
      <div class="tabDetBox_recommendToReading">
        <Reommend />
      </div>
      <div class="tabDetBox_tagTitle">
        <tagTitle />
      </div>
    </div>
  </div>
</template>
<script>
import axios from "../../utils/axios";
import { ActicleTab } from "../../api/index";
import Reommend from "../../components/Reommend";
import tagTitle from "../../components/tagTitle";
export default {
  components: {
    Reommend,
    tagTitle,
  },
  data() {
    return {
      list: [],
      page: 1,
      arr: [],
      num: 0,
      addIndex: 0,
      form: {},
    };
  },
  watch: {
    async $route() {
      this.addList();
    },
  },
  mounted() {
    this.addList();
    this.getActicleTab();
    console.log(this.arr);
  },
  methods: {
    golistDet(id) {
      this.$router.push(`/detail/${id}`);
    },
    async addList() {
      let res = await axios.get(
        `https://bjwz.bwie.com/wipi/api/article/category/${this.$route.params.id}`,
        {
          params: {
            page: this.page,
            pageSize: this.pageSize,
            status: "publish",
          },
        }
      );
      this.arr = res.data.data[0];
      this.num = res.data.data[1];
      console.log(res.data.data[0]);
    },
    async getActicleTab() {
      const { data } = await ActicleTab();
      this.list = data.data;
      data.data.forEach((item) => {
        if (item.value == this.$route.params.id) {
          this.form = item;
        }
      });
    },
    tabitem(value, index1) {
      console.log(value);
      this.$router.push(`/tabdetail/${value}`);
      this.list.forEach((item, index) => {
        if (index == index1) {
          this.form = item;
        }
      });
    },
    tabAll() {
      this.$router.push("/");
    },
  },
};
</script>
<style lang="scss" scoped>
html > body {
  background: var(--background);
}
.tabDetBox {
  width: 1000px;
  height: 200vh;
  margin-top: 10px;

  .tabDetBox-left {
    width: 670px;
    background: var(--contentBackground);
    float: left;
    margin-left: -80px;

    .tabDetBox-head {
      width: 670px;
      height: 100px;
      margin-bottom: 20px;
      background: var(--contentBackground);
      text-align: center;
    }
    .tabDetBox-tabBox {
      width: 670px;
      background: var(--contentBackground);
      .tabDetBox-tabBo-ul {
        width: 670px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ddd;
        li {
          float: left;
          margin-left: 30px;
        }
        li:hover {
          color: red;
        }
      }
      .Acticle_tab_list {
        margin-top: 20px;
        color: var(--titleHcolor);
        .ActicleListBox {
          width: 100%;
          height: 170px;
          background: var(--contentBackground);
          border-bottom: 1px solid #ccc;
          .ActicleListBox_bigTitle {
            margin-left: 20px;
            margin-top: 10px;
          }
          .ActicleListBox_img {
            width: 120px;
            height: 100px;
            margin: 10px 20px 0 20px;
          }
          .ActicleListBox_p span {
            margin-left: 5px;
            color: #6b6863;
          }
          .ActicleListBox_hover {
            font-size: 16px;
            font-weight: bold;
          }
          .ActicleListBox_hover:hover {
            color: red;
          }
          .ActicleListBox_title {
            color: #7a7e89;
          }
          .ActicleListBox_line {
            color: #7a7e89;
            margin: 0 5px 0 5px;
          }
        }
      }
    }
  }
  .tabDetBox-right {
    font-size: 28px;
    width: 320px;
    height: 100vh;
    float: right;

    .tabDetBox_recommendToReading {
      background: var(--contentBackground);
    }
    .tabDetBox_tagTitle {
      font-size: 14px;
      width: 320px;
      height: 300px;
      background: var(--contentBackground);
    }
  }
}
</style>
